<template>
  <transition name="subAnimation">
    <div id="addFrom" class="zubox">
      <div class="forms zumain">
        <p class="forms_header zumain_header">{{ judjeCont }}表单</p>
        <el-form
          ref="form"
          class="forms_form zumain_center"
          :model="form"
          label-position="right"
          label-width="160px"
          :rules="rules"
        >
          <el-form-item label="作业名称:" prop="jobName">
            <el-input
              v-model="form.jobName"
              placeholder="请输入作业名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="源系统名称:" prop="fromSystemName">
            <el-input
              v-model="form.fromSystemName"
              placeholder="请输入源系统名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="源系统IP:" prop="fromSystemIp">
            <el-input
              v-model="form.fromSystemIp"
              placeholder="请输入源系统IP"
            ></el-input>
          </el-form-item>
          <el-form-item label="源文件路径:" prop="fromFilePath">
            <el-input
              v-model="form.fromFilePath"
              placeholder="请输入源文件路径+IP"
            ></el-input>
          </el-form-item>
          <el-form-item label="文件名:" prop="fromFileName">
            <el-input
              v-model="form.fromFileName"
              placeholder="xxxx_yyy_mmm"
            ></el-input>
          </el-form-item>
          <el-form-item label="文件大小:" prop="fromFileSize">
            <el-input
              v-model="form.fromFileSize"
              placeholder="请输入文件大小"
            ></el-input>
          </el-form-item>
          <el-form-item label="目的路径:" prop="toSystemPath">
            <el-input
              v-model="form.toSystemPath"
              placeholder="请输入目的路径"
            ></el-input>
          </el-form-item>
          <el-form-item label="传输频率:" prop="frequency">
            <el-select v-model="form.frequency" placeholder="每日">
              <el-option label="一次性" value="ONCE"></el-option>
              <el-option label="一天一次" value="ONCE_A_DAY"></el-option>
              <el-option label="一月一次" value="ONCE_A_MONTH"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="源文件负责人:" prop="ownerUserName">
            <el-input
              v-model="form.ownerUserName"
              placeholder="请输入源文件源文件负责人(owner)"
            ></el-input>
          </el-form-item>
          <el-form-item label="文件产出人:" prop="fromUserName">
            <el-input
              v-model="form.fromUserName"
              placeholder="请输入文件产出人域账号"
            ></el-input>
          </el-form-item>
          <el-form-item label="日期偏移量:" prop="offsetDate">
            <el-input
              v-model="form.offsetDate"
              placeholder="请输入日期偏移量"
            ></el-input>
          </el-form-item>

          <el-form-item label="清算对账类重要作业:" prop="liquidationFlag">
            <el-radio-group v-model="form.liquidationFlag">
              <el-radio label="YES">是</el-radio>
              <el-radio label="NO">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item
            label="通知邮箱:"
            class="emailStyle"
            style="marign-bottom: 30px"
            ref="noticeEmail"
            prop="noticeEmail"
          >
            <el-select
              placeholder="多个邮箱;分割"
              v-model="form.noticeEmail"
              multiple
              filterable
              default-first-option
              allow-create
              poper-calss="emailSelect"
              :popper-append-to-body="false"
              @input.native="emailChange"
              @blur.native.capture="kk"
            >
              <el-option
                v-for="item in emails"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="forms_bottom zumain_btn">
          <el-button plain @click="addyin">取消</el-button>
          <el-button v-show="judjeCont !== '编辑'" @click="onSubmit"
            >提交</el-button
          >
          <el-button v-show="judjeCont === '编辑'" @click="onSubmitUpdate"
            >修改</el-button
          >
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
// import { addFileUploadApply, updateFileUploadApply } from "../../apis2";
export default {
  props: ["judjeCont", "editForm"],
  data() {
    var emailReg = (rule, value, callback) => {
      console.log(value, "查看value值");
      if (!value.length) {
        callback(
          new Error("多个邮箱半角;分割，支持后缀@spdbccc.com.cn;@spdb.com.cn")
        );
      }
      this.emailinput = "";
      let ins = value.pop();
      if (ins) {
        let int = ins.split(";");
        int.map((item, index) => {
          let suffix = item;
          let suffixTwo = suffix.split("@")[1];
          if (suffixTwo) {
            let newstr = suffixTwo.split("");
            for (let i in newstr) {
              newstr[i] = newstr[i].toLowerCase();
            }
            newstr = newstr.join("");
            suffix = suffix.split("@")[0] + "@" + newstr;
          }
          if (item) {
            console.log(suffix, "查看处理过后的数据");
            item = item.trim();
            let reg = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@spdbccc.com.cn$/;
            let regtwo = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@spdb.com.cn$/;
            if (reg.test(suffix) || regtwo.test(suffix)) {
              value.push(item);
            } else {
              callback(
                new Error(
                  "多个邮箱半角;分割,支持后缀@spdbccc.com.cn;@spdb.com.cn"
                )
              );
            }
          }
        });
      }
      callback();
    };
    return {
      form: {
        id: "",
        jobName: "",
        fromSystemName: "",
        fromSystemIp: "",
        fromFilePath: "",
        fromFileName: "",
        fromFileSize: "",
        fromUserName: "",
        ownerUserName: "",
        frequency: "",
        offsetDate: "",
        liquidationFlag: "NO",
        noticeEmail: [],
        toSystemPath: "",
      },
      emailinput: "",
      emails: [],
      rules: {
        jobName: [{ required: true, message: "请输入内容", trigger: "blur" }],
        fromSystemName: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
        fromSystemIp: [
          { required: true, vaildator: emailReg, trigger: "change" },
        ],
        fromFilePath: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
        fromFileName: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
        fromFileSize: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
        fromUserName: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
        ownerUserName: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
        frequency: [{ required: true, message: "请输入内容", trigger: "blur" }],
        offsetDate: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
        liquidationFlag: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
        noticeEmail: [
          { required: true, validator: emailReg, trigger: "change" },
        ],
        toSystemPath: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //邮箱失焦事件
    kk(e) {
      console.log("邮箱失焦事件");

      let ins = this.emailinput;
      if (!ins) {
        return false;
      }

      let int = ins.split(";");
      let kk = int.every((item, index) => {
        return this.form.noticeEmail.indexOf(item) != -1;
      });
      if (kk) {
        this.emailinput = "";
        return false;
      }

      if (ins) {
        int.map((item, index) => {
          let suffix = item;
          let suffixTwo = suffix.split("@")[1];
          if (suffixTwo) {
            let newstr = suffixTwo.split("");
            for (let i in newstr) {
              newstr[i] = newstr[i].toLowerCase();
            }
            newstr = newstr.join("");
            suffix = suffix.split("@")[0] + "@" + newstr;
          }
          let reg = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@spdbccc.com.cn$/;
          let regtwo = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@spdb.com.cn$/;
          if (item) {
            item = item.trim();
            suffix = suffix.trim();

            if (reg.test(suffix) || regtwo.test(suffix)) {
              this.form.noticeEmail.push(item);
            } else {
              if (
                !this.$refs.noticeEmail.$el.childNodes[1].childNodes[0]
                  .childNodes[2]
              ) {
                let kk = document.createElement("div");
                kk.innerHTML =
                  "<div class='el-form-item__error'>多个邮箱半角;分割,支持后缀@spdbccc.com.cn;@spdb.com.cn</div>";
                this.$refs.noticeEmail.$el.childNodes[1].childNodes[0].appendChild(
                  kk
                );
              } else {
                this.$refs.noticeEmail.$el.childNodes[1].childNodes[0].childNodes[2].innerHTML =
                  "<div class='el-form-item__error'>多个邮箱半角;分割,支持后缀@spdbccc.com.cn;@spdb.com.cn</div>";
              }
              let _this = this;
              setTimeout(function () {
                this.$refs.noticeEmail.$el.childNodes[1].childNodes[0].childNodes[2].innerHTML =
                  "";
              }, 3000);
            }
          }
        });
        this.emailinput = "";
      }
    },
    emailChange(el) {
      if (!el.target.value) {
        return false;
      } else {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.emailinput = el.target.value;
        });
      }
    },
    onSubmitUpdate() {
        let newFormData=new FormData()
        newFormData.append("id",this.form.id)
        newFormData.append("jobName",this.form.jobName)
        newFormData.append("fromSystemName",this.form.fromSystemName)
        newFormData.append("fromSystemIp",this.form.fromSystemIp)
        
      updateFileUploadApply(newFormData).then(() => {
        this.$message.success("success");
        this.$emit("addyin");
      });
    },
    onSubmit() {
      let demo = {
        jobName: this.form.jobName,
        fromSystemName: this.form.fromSystemName,
        fromSystemIp: this.form.fromSystemIp,
        fromFilePath: this.form.fromFilePath,
        fromFileName: this.form.fromFileName,
        fromFileSize: this.form.fromFileSize,
        fromUserName: this.form.fromUserName,
        ownerUserName: this.form.ownerUserName,
        frequency: this.form.frequency,
        offsetDate: this.form.offsetDate,
        liquidationFlag: this.form.liquidationFlag,
        noticeEmail: this.form.noticeEmail,
        toSystemPath: this.form.toSystemPath,
      };
      console.log(demo, "查看新增数据");
      addFileUploadApply(demo).then(() => {
        this.$message.success("success");
        this.$emit("addyin");
      });
    },

    addyin() {
      this.$emit("addyin");
    },
  },
  //   created() {
  //     if (this.editForm) {
  //       this.form = this.editForm;
  //       console.log(this.editForm);
  //     }
  //   },
};
</script>

<style scoped>
#addFrom >>> .el-select-dropdown {
    display: none;
  }
.header_main {
    height: 72px;
    background: #ffffff;
    padding-left: 24px;
    border-bottom: 1px solid #cccccf;
  }
.forms {
    width: 560px;
    background: #ffffff;
    max-height: 90vh;
    padding: 0px;

    
  }
.forms_form {
      max-height: calc(90vh - 187px);
      overflow: auto;
      margin: 0px;
    }
.forms_form .el-select {
        width: 100%;
      }
.el-form-item {
        margin: 0px 0px 14px 0;
        text-align: left;
      }
.el-form-item>>> .el-input__inner {
          width: 100%;
        }
.forms_bottom {
        border-top: 1px solid #cccccf;
        background: #ffffff;
      }
.discolor>>> label {
          color: #999a9d;
        }
.emailStyle>>> .el-select__caret {
          display: none;
        }
</style>
